<template>
	<view class="feedback">
		<view class="pagetitle">
			<uni-breadcrumb separator="/">
				<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
					{{route.name}}
				</uni-breadcrumb-item>
			</uni-breadcrumb>
			<view class="right">
				<!-- <view class="select">
					<uni-data-select
					   v-model="selectTimeVal"
					   :localdata="range"
						@change="changeDateSelect"
					></uni-data-select>
				</view> -->
				<view class="" style="display: flex;width:400px;">
					<uni-easyinput errorMessage v-model="searchVal" focus placeholder="搜索内容"></uni-easyinput>
					<button size="mini" plain style="margin:5rpx 10rpx;">搜索</button>
				</view>
			</view>
		</view>
		<view style="margin:20px auto;" class="nulldata" v-if="Data.length === 0">
			暂无信息
		</view>
		<view class="cards "  >
			<view class="box_list animated-item"  v-for="(item,index) in Data" >
				<view class="title">
					<view class="headerimage">
						<image v-if="item.user_id[0].avatar" @click="eventImage(item.user_id[0].avatar)"
						:src="item.user_id[0].avatar+'?x-oss-process=image/resize,m_fixed,h_100,w_100'" mode="widthFix" style="width:60rpx;border-radius:50%;" ></image>
					</view>
					<text class="text titleApp">
						{{item.user_id[0].nickname}}
					</text>
					<text class="text titleApp" style="font-weight:bold">
						{{
							item.type == 1 ?'店铺问题': item.type== 2 ? '账户问题' : item.type == 3 ? '用户问题' : item.type == 4 ? '技术问题' : '其他问题'
						}}
					</text>
				</view>
				<view class="body_row">
					<view class="left">
						{{item.user_id[0].register_env.app_name}}
					</view>
					<view class="center ">
						<text class="TelApp labelApp">
							{{initMobile(item.mobile)}}
						</text>
					</view>
				</view>
				<view class="body_row">
					<view  style="color:#000;width: 100%;" class="center pages_content">
						<uni-collapse style="background:#f9f9f9;" >
							<uni-collapse-item style="background:#f9f9f9;" :title="item.content" :show-animation="true">
								<view class="" style="background:#f9f9f9;">
									<text class="text">
										{{item.content}}
									</text>
								</view>
							</uni-collapse-item>
						</uni-collapse>
					</view>
				</view>
				<view class="body_row">
					<view class="center">
						<view style="color:#000" class="pages_content">
							<view class="" style="color:#787878">
								{{item.is_solve? item.is_solve ? '已处理':'未处理':'未处理'}}
							</view>
						</view>
					</view>
					<view class="right">
						<uni-dateformat :date="item.create_date"></uni-dateformat>
					</view>
				</view>
				<view class="row_scroll" id="outsideDiv" v-if="item.images.length !== 0">
					<view class="image" v-for="(img,k) in item.images" :key="k">
						<image @click="eventImage(img)" :src="img+'?x-oss-process=image/resize,m_fixed,h_100,w_100'" mode="widthFix"
							style="width:100%;border:1px solid #ccc"></image>
					</view>
				</view>
				<view class="body_button">
					<view style="text-align: center;margin:10px 0 0 0 "  class="child"  >
						<button :disabled="item.is_solve" size="mini"
							@click="this.$refs.showStatus.open() ; this.ID = item._id" style="margin:0px 30px" type="primary">
							{{item.is_solve? item.is_solve ? '已处理':'处理':'处理'}}
						</button>
						<!-- <button size="mini" @click="goUrl('/pages/log/feedback/detail?id='+item._id)">
							详情
						</button> -->
					</view>
				</view>
			</view>
			
		</view>

		<!-- 成功 提醒 -->
		<uni-popup ref="showStatus" type="center" backgroundColor="#fff">
			<view class="popup">
				<view class="title" style="color:#199bff">
					请您确保当前问题已经成功解决
				</view>
				<view style="line-height:80rpx;">
					当前问题已经成功解决,请确保问题得到妥善处理（问题得到妥善处理后应向问题发起人进行反馈）。
					<view style="color:#999">
						确认后将改变当前反馈数据信息
					</view>
				</view>
				<button @click="eventExamine" class="uni-button" size="mini" type="primary">
					确认已处理
				</button>
				<button @click=" this.$refs.showStatus.close() " class="uni-button" size="mini" type="">
					取消
				</button>
			</view>
		</uni-popup>

		<view class="uni-pagination-box">
			<uni-pagination @change="enventFneye" :v-model="currentPage" :pageSize="limit" title=""
				:total="total"></uni-pagination>
		</view>

	</view>
</template>

<script>
	const db = uniCloud.databaseForJQL()
	const collection = "users_opinion"
	import Util from "@/js_sdk/validator/util.js"
	import { areaPower } from "@/js_sdk/manage-area/manage.js";
	export default {
		data() {
			return {
				// 分页
				total: 0, //  总条数
				skip: 0, // 开始查询位置
				limit: 6, // 单词查询条数
				currentPage: 1, // 当前页
				routes: [{
						to: "/pages/index/index",
						name: "首页",
					},
					{
						to: "",
						name: "日志管理",
					},
					{
						to: "",
						name: "意见反馈"
					}
				],
				chartsData: [{}],
				ID: "",
				Data: []
			}
		},
		onLoad() {
			this.getFeedbackData()
		},
		methods: {
			getFeedbackData() {
				// const feedback = db.collection(collection).skip(0).limit(20).get().then(res=>{
				// 	this.Data = res.data
				// })
				const feedback = db.collection(collection).orderBy("create_date desc").getTemp({
					getOne: false
				})
				const shops = db.collection("shop").field("area_all,_id").getTemp({
					getOne: true
				})
				const users = db.collection("uni-id-users").field("nickname,mobile,avatar,register_env,_id").getTemp({
					getOne: true
				})
				db.collection(feedback, shops,users).where({
					"shop_id,area_all.value":db.command.in( areaPower() ),
				}).skip(this.skip).limit(6).get({
					getCount: true
				}).then(res => {
					this.total = res.count
					this.Data = res.data
				})
			},
			// 分页
			enventFneye(val) {
				this.skip = (val.current - 1) * 6
				this.getFeedbackData()
			},
			// 修改数据
			eventExamine() {
				this.$refs.showStatus.close()
				if (!this.ID) {
					return uni.showModal({
						title: "❗当前环境异常",
						content: "当前环境不能受理此操作，请刷新重试"
					})
				}
				db.collection(collection).doc(this.ID).update({
					is_solve: true
				}).then(res => {
					uni.showModal({
						title: "状态更改成功",
						content: "当前反馈已经成功解决，点击确认返回列表处",
						showcancel: false
					}).then(res => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/log/feedback/feedback'
							})
						}
					})
				});
			},
			shortenString(content) {
				return Util.shortenString(content)
			},
			// 放大图片
			eventImage(image) {
				uni.previewImage({
					urls: [image]
				})
			},
			goUrl(Url) {
				uni.navigateTo({
					url: Url
				})
			},
			initMobile(mobile) {
				return Util.formatPhoneNumber(mobile)
			},
			goback() {
				uni.navigateBack(1)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.nulldata{
		color:#777;
		display: flex;
		justify-content: center;
		align-items: center;
		height:100px;
	}
	.cards{
		display:grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		column-gap:10px;
		row-gap:20px;
		margin:20px 0;
		.box_list{
			position: relative;
			min-height: 200px;
			border-radius:5px;
			padding:20px 10px 80px 10px;
			box-shadow:0 3px 10px 0 #dadada;
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.headerimage{
					flex:.2;
				}
				.text{
					flex:1;
					overflow: hidden; /* 超出部分隐藏 */
					text-overflow: ellipsis; /* 使用省略号代替被截断的文本*/
					display: -webkit-box; /* 将元素作为弹性伸缩盒子 */
					-webkit-line-clamp:1; /* 最多显示两行 */
					-webkit-box-orient: vertical; /* 设置弹性伸缩盒子的子元素垂直排列 */
				}
				.text:last-child{
					flex:.4;
					text-align: right;
				}
			}
			.body_button{
				width:95%;
				position: absolute;
				bottom:20px;
			}
			.row_scroll{
				overflow-x: auto;
				column-gap:10px;
				white-space: nowrap;
				.image{
					display: inline-block; 
					margin:0 10px 0 0;
					width:80px; height:80px;
					background:#36d;
				}
			}
			.body_row{
				display: flex;
				justify-content:left;
				margin:5px 0;
				.left{
					flex:.3;
				}
				.center{
					flex:1;
				}
				.right{
					flex:.8;
					color:#868686;
				}
			}
			.body_row , .title , .row_scroll {
				padding:8px 10px;
				border-bottom:2px dotted #eee;
			}
		}
	}
	.animated-item {
		opacity: 0;
		transform: translate(10px, -50px);
		animation: fadeInLeft 1s ease forwards;
	}
	@keyframes fadeInLeft {
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	.popup {
		width: 500px;
		border-radius: 20rpx;
		padding: 30rpx;

		button {
			margin: 20px 50rpx;
		}
	}

	.uni-button {
		margin: 0 10rpx
	}

	.feedback {
		padding: 20px;
	}
</style>